<template>
  <div class="nav">
    <Menu
      background-color="#00000000"
      text-color="#cccccc"
      active-text-color="#ffffff"
      :default-active="path"
      router
      mode="horizontal"
    >
      <MenuItem index="/">
        首页
      </MenuItem>
      <MenuItem
        v-for="item in types"
        :index="`/list/${item.id}`"
        :key="item.id"
      >
        {{ item.type }}
      </MenuItem>
      <template v-if="!isLogin">
        <MenuItem index="/login">
          登录
        </MenuItem>
        <MenuItem index="/logon">
          注册
        </MenuItem>
      </template>
      <MenuItem v-else index="/user">
        {{ nickName }}
        的个人中心
      </MenuItem>
    </Menu>
  </div>
</template>

<script>
import { Menu, MenuItem } from "element-ui";
import { mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      defaultActive: ""
    };
  },
  computed: {
    ...mapGetters(["types", "path", "isLogin", "nickName"])
  },
  methods: {
    ...mapActions(["getTypes"])
  },
  components: {
    Menu,
    MenuItem
  },
  created() {
    this.getTypes();
  },
  mounted() {}
};
</script>

<style>
.nav {
  display: flex;
  justify-content: center;
}
.el-menu--horizontal > .el-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.2) !important;
}
</style>
